<template>
  <!-- 商户收款码 -->
  <view>
    <nav-bar
      :navTitle="title"
      iconColor="#000"
      :backgroundColor="backgroundColor"
      :isBackgroundColor="false"
    ></nav-bar>
    <view class="page flex flex-column">
      <view class="topPart flex bg-white align-center">
        <image
          src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/merchant/balanceIcon.png"
          class="balanceIcon"
          mode="scaleToFill"
        />
        <view class="topText f-s-24"
          >每日收益会在第二日 <text>12:00:00</text>自动提</view
        >
      </view>
      <view class="collect flex justify-between align-center">
        <view>
          <view class="flex justify-between">
            <view class="totalTips f-s-28">总资产(元)</view>
          </view>
          <view class="means fw-600 dinAlternate">{{ allBalance }}</view>
          <view class="income f-s-24"
            >昨日收益 <text class="profit">{{ yestodayBalance }}</text></view
          >
        </view>
        <view
          @click="subStatus = !subStatus"
          class="tipsBtn col-272 f-s-28 fw-600 flex justify-center align-center"
          >{{ subStatus ? "提现" : "记录" }}</view
        >
      </view>
      <view class="settlement bg-white mt-20">
        <view
          class="horizontal h-116 flex justify-between"
          :class="subStatus ? 'borBottom' : ''"
        >
          <view class="label flex align-center f-s-32 fw-600">{{
            subStatus ? "结算账户" : "提款金额"
          }}</view>
          <view class="value flex align-center f-s-32 fw-600" v-if="subStatus"
            >微信/银行卡/支付宝</view
          >
        </view>
        <view
          class="horizontal h-116 flex justify-between align-center"
          v-if="subStatus"
        >
          <view class="date flex align-center justify-center fw-600 col-333">
            <dateControl
              @getDateData="getDateData"
              :dateNum="date"
              :name="'date'"
            ></dateControl>
          </view>
          <view
            class="filter flex align-center justify-center fw-600 col-333 f-s-28"
            >筛选
            <image
              src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/merchant/filterIcon.png"
              mode="scaleToFill"
              class="filterIcon"
            />
          </view>
        </view>
      </view>
      <view class="stream bg-white" v-if="subStatus">
        <view
          class="streamItemn borBottom flex flex-column justify-center"
          v-for="(item, index) in streamList"
          :key="index"
        >
          <view class="flex justify-between">
            <view class="label fw-600 f-s-32 col-333 text-container">{{
              item.remark
            }}</view>
            <view class="value fw-600 f-s-40 col-333 dinAlternate"
              ><text v-if="item.type === 'DEDUCT'">-</text
              >{{ item.amount }}</view
            >
          </view>
          <view class="flex justify-between mt-20">
            <view class="time f-s-28">{{ item.createTime }}</view>
            <view class="balance f-s-28"
              ><text class="tips">余额</text>{{ item.balance }}</view
            >
          </view>
        </view>
        <emptyPage
          v-show="streamList.length === 0"
          :mTop="'25%'"
          title="暂无数据"
          :locate="true"
          :imgSrc="'https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/piteras.png'"
        ></emptyPage>
        <view class="footer flex justify-center align-center">
          <view v-if="!hasMore && streamList.length !== 0" class="no-more">{{
            loadTitle
          }}</view>
        </view>
      </view>
      <view class="stream bg-white" :class="subStatus ? '' : 'mt0'" v-else>
        <view class="searchPart flex align-center">
          <image :src="amountIcon" class="amountIcon" mode="scaleToFill" />
          <input
            type="digit"
            class="searchInput h-full"
            placeholder="提现最低额度为10元"
            confirm-type="search"
            name="search"
            v-model="amount"
            @change="alteration"
            placeholder-class="placeholder"
            maxlength="20"
        /></view>
        <view class="way flex justify-between align-center">
          <view class="f-s-32 fw-600 col-333">选择提现方式</view>
          <view class="f-s-24 col-c7B">添加账户</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navBar from "@/components/navBar";
import dateControl from "./components/dateControl.vue";
import { getMonthWaterList, getAccountBalanceData } from "@/api/user";
import emptyPage from "@/components/emptyPage.vue";
import { mapGetters } from "vuex";
import amountIcon from "./img/amountIcon.png";
export default {
  components: {
    navBar,
    dateControl,
    emptyPage,
  },
  data() {
    return {
      title: "账户余额",
      backgroundColor: "#fff3e7",
      amountIcon,
      amount: "", // 提现金额
      subStatus: false, // true为显示流水，false为显示提现
      date: "", // 目前的年和月
      pageNumber: 1, //页码
      isPageActive: true, // 标记页面是否激活
      hasMore: true, // 是否还有更多数据
      loadTitle: "暂无更多数据～",
      allBalance: "-", // 总资产
      yestodayBalance: "-", //昨日收入
      statusList: {
        ADD: "增加",
        SUBTRACT: "扣减",
        FREEZE: "冻结",
        CANCEL: "取消",
        DEDUCT: "提现",
      },
      streamList: [],
    };
  },
  computed: {
    ...mapGetters(["isLogin", "merchantId"]),
  },
  onLoad(options) {
    this.getNowTimeData();
    if (this.isLogin) {
      this.getNowDate();
    }
  },
  onHide() {
    this.isPageActive = false; // 页面卸载时标记为未激活
  },
  onReachBottom() {
    // 触底加载更多
    if (!this.hasMore && this.isPageActive) return;
    this.getMonthWaterData();
  },
  methods: {
    // 输入金额操作
    alteration() {},
    getInfoData() {
      getAccountBalanceData(this.merchantId).then((res) => {
        this.yestodayBalance = res.data.yestodayBalance;
        this.allBalance = res.data.allBalance;
      });
    },
    getNowTimeData() {
      const now = new Date();
      // 获取当前年份（四位数字）
      const year = now.getFullYear();
      // 获取当前月份（0-11，0表示一月，11表示十二月）
      const month = now.getMonth() + 1; // 通常我们会加1，使其更符合常规理解（1-12）
      this.date = `${year}-${month.toString().padStart(2, "0")}`;
      console.log("2222222222222222222", this.date);
    },
    // 获取当前的年和月
    getNowDate() {
      this.getMonthWaterData();
      this.getInfoData();
    },
    getMonthWaterData() {
      uni.showToast({
        title: "加载中...", // 提示内容
        icon: "loading", // 图标类型，可选值：'success'、'loading'、'none'
        duration: 300, // 提示持续时间，单位毫秒
        mask: true, // 是否显示透明蒙层
      });
      let data = {
        searchMonth: this.date,
        id: this.merchantId, // iD为商户Id、用来区分商户
        pageSize: 10,
        pageNumber: this.pageNumber,
      };
      getMonthWaterList(data).then((res) => {
        let list = res.data.records;
        this.streamList = this.streamList.concat(list); // 滚动添加之前的数据
        let status = list.length === 0 ? false : true;
        if (status) this.hasMore = true;
        else this.hasMore = false;
        this.pageNumber++;
        setTimeout(() => {
          uni.hideToast(); // 隐藏 Toast
        }, 300);
      });
    },
    getDateData(value) {
      this.date = value;
      if (this.isLogin) {
        this.streamList = [];
        this.pageNumber = 1;
        this.getMonthWaterData();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  height: 88vh;
}
.topPart {
  background-color: #ffffff;
  padding-left: 38rpx;
  height: 58rpx;
  .balanceIcon {
    height: 35rpx;
    width: 35rpx;
  }
  .topText {
    margin-left: 16rpx;
    color: #666666;
  }
}
.collect {
  padding: 44rpx 44rpx 52rpx 54rpx;
  background-color: #fff3e7;
  .totalTips,
  .brief {
    color: #333332;
  }
  .operate {
    width: 82rpx;
    height: 36rpx;
    line-height: 36rpx;
    text-align: center;
    background: #00a76f;
    border-radius: 4rpx;
    margin-left: 14rpx;
  }
  .means {
    font-size: 92rpx;
    line-height: 128rpx;
  }
  .income {
    width: 216rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    background: #fffbf7;
    border-radius: 16rpx;
    color: #666666;
    .profit {
      margin-left: 8rpx;
    }
  }
}
.settlement {
  padding: 0rpx 38rpx;
}
.horizontal {
  .label,
  .value {
    color: #333333;
  }
}
.stream {
  flex: 1;
  padding: 0rpx 38rpx 20rpx 38rpx;
  margin-top: 32rpx;
}
.way {
  margin-top: 72rpx;
}
.mt0 {
  margin-top: 0rpx !important;
}
.streamItemn {
  height: 182rpx;
  .time,
  .balance {
    color: #a0a0a0;
  }
}
.mt-20 {
  margin-top: 20rpx;
}
.date {
  width: 214rpx;
  height: 68rpx;
  background: #f5f5f5;
  border-radius: 4px;
  text-align: center;
}
.dateDropDown {
  width: 20rpx;
  height: 11rpx;
  margin-left: 20rpx;
}
.searchPart {
  height: 124rpx;
  background: #f6f6f6;
  border-radius: 18rpx;
  padding: 0rpx 38rpx;
  .amountIcon {
    width: 30rpx;
    height: 35rpx;
  }
  .searchInput {
    margin-left: 30rpx;
  }
}
.filterIcon {
  width: 34rpx;
  height: 34rpx;
  margin-left: 10rpx;
}
.h-116 {
  height: 116rpx;
}
.borBottom {
  border-bottom: 2rpx solid #ebebeb;
}
.tips {
  margin-right: 6rpx;
}
.tipsBtn {
  width: 154rpx;
  height: 78rpx;
  background: #ffffff;
  border-radius: 40rpx;
}
</style>
